<template>
  <div class="student-detail-main">
    <!-- 弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
      <el-form ref="form" :rules="rules" :model="student" label-width="80px">
        <!-- 基本信息 -->
        <el-card class="box-card tc" shadow="never">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="student.name" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select v-model="student.sex" placeholder size="small">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班级">
                <el-select v-model="student.classId" placeholder="请选择班级" size="small">
                  <el-option
                    v-for="item in classList"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="电话" prop="tel">
                <el-input v-model="student.tel" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证">
                <el-input v-model="student.manID" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市">
                <el-cascader
                  size="small"
                  :options="cityOptions"
                  v-model="selectCity"
                  @change="cityChange"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="宿舍">
                <el-select v-model="student.dormId" placeholder="请选择宿舍" size="small">
                  <el-option
                    v-for="item in dormList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入住日期">
                <el-date-picker
                  v-model="student.dormStartTime"
                  type="date"
                  placeholder="选择日期"
                  size="small"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="离开日期">
                <el-date-picker
                  v-model="student.dormEndTime"
                  type="date"
                  placeholder="选择日期"
                  size="small"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 补充信息 -->
        <el-card class="box-card tc" shadow="never">
          <div slot="header" class="clearfix">
            <span>补充信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="联系人">
                <el-input v-model="student.tel2" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="微信">
                <el-input v-model="student.wx" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="QQ">
                <el-input v-model="student.qq" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="毕业院校">
                <el-input v-model="student.school" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作">
                <el-input v-model="student.job" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <!-- 交费信息 -->
      <el-card class="box-card tc" shadow="never">
        <div slot="header" class="clearfix">
          <span>交费信息</span>
          <el-button type="text" @click="costShow">+交费</el-button>
        </div>
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="costForm"
          v-show="isShow"
          ref="form"
        >
          <el-form-item label="费用类型">
            <el-radio v-model="costForm.costType" label="0">学费</el-radio>
            <el-radio v-model="costForm.costType" label="1">住宿费</el-radio>
          </el-form-item>
          <el-form-item label="费用">
            <el-input-number v-model="costForm.costValue" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item label="费用时间">
            <el-date-picker
              v-model="costForm.costTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择交费日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="costForm.costBak"></el-input>
          </el-form-item>
          <el-form-item style="float:right">
            <el-button @click="costCancel">取消</el-button>
            <el-button type="primary" @click="costSubmit">添加交费信息</el-button>
          </el-form-item>
        </el-form>

        <!-- 预交费清单列表 -->
        <el-table :data="precostList" border style="width: 100%">
          <el-table-column prop="costType" label="费用类型" width="120"></el-table-column>
          <el-table-column prop="costValue" label="费用" width="120"></el-table-column>
          <el-table-column prop="costTime" label="交费时间" width="120"></el-table-column>
          <el-table-column prop="costBak" label="备注" width="220"></el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button type="primary" prop="tempId" @click="costDel(scope.row.tempId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 交费清单列表 -->
        <el-table :data="costList" v-if="costList.length>0" border style="width: 100%">
          <el-table-column prop="costType" label="费用类型" width="120"></el-table-column>
          <el-table-column prop="costValue" label="费用" width="120"></el-table-column>
          <el-table-column prop="costTime" label="交费时间" width="120"></el-table-column>
          <el-table-column prop="costBak" label="备注" width="220"></el-table-column>
        </el-table>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="doSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";
import { resetFormData } from "@/utils/index";
import {
  studentDetail,
  studentSave,
  studentUpdate,
  studentDel,
  xyCostList,
} from "@/api/system/student";
import { regionDataPlus, CodeToText } from "element-china-area-data";
export default {
  props: ["dormList", "classList"],
  name: "studentDetail",

  data() {
    var validatorPhone = function (rule, value, callback) { //实现手机号码的验证
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if(!/^1\d{10}$/.test(value)) {
        callback(new Error('手机号格式错误'))
      }
    }
    return {
      isShow: false,
      cityOptions: regionDataPlus,
      selectCity: [],
      student: {
        sex: "0", //实现填写表单时的默认选项
      },
      dialogVisible: false,
      labelPosition: "right",
      costForm: {
        costType: "0",
      },
      precostList: [], //预交费记录
      costList: [], //交费记录
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        tel:[
          {required:true, validator:validatorPhone, message:'请输入手机号',trigger:"blur"},
          ]
      },
    };
  },

  created() {},
  methods: {
    openDialog() {
      //通过一个方法,来控制弹框的显示,并在父级想要调用时通过this.$refs.deatil(是父级为儿子通过ref所定义的值).openDialog()来实现
      this.dialogVisible = true;
      this.costList = [];
    },
    openDialogDetail(id) {
      this.openDialog();
      // 获取明细
      studentDetail({ id }).then((res) => {
        this.student = res.data;
      });

      xyCostList({
        userId: id,
        start: 1,
        limit: 99,
      }).then((res) => {
        this.costList = res.data.list;
      });
    },
    cityChange(v) {
      console.log(v); //得到的是区域码
      this.student.cityText =
        CodeToText[v[0]] + "," + CodeToText[v[1]] + "," + CodeToText[v[2]]; //将区域码转换为汉字
      console.log(this.student.cityText);
    },
    handleClose() {
      this.dialogVisible = false;   //关闭弹窗
      this.student = {};      //点击该事件时清空表单数据
      this.precostList = [];
    },
    // 点击弹窗确定按钮,提交保存数据
    doSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          var api = null; //添加和编辑信息都需要通过该事件来进行修改,所以重新定义一个新的变量
          if (this.student.id) {
            api = studentUpdate;
          } else {
            api = studentSave;
          }

          var submitObj = { //整合两个表单内容
            xyUser: {
              ...this.student,
            },
          };
          submitObj._size = this.costList.length;
          for (var i = 0; i < this.costList.length; i++) {
            submitObj["xyCostItems_" + i] = this.costList[i];
          }

          api(
            // xyUser: {
            //   ...this.student,
            // },
            submitObj
          ).then((res) => {
            // 如果返回的结果成功了 , 1. 调用handleClose关闭窗口
            // 2. 调用getStudentList() 刷新列表
            if (res.code == "success") {
              this.$message.success("保存成功");
              this.handleClose();
              //   this.getStudentList()
              this.$emit("refresh-list"); //使用$emit触发父组件的自定义事件
            }
            console.log(res);
          });
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    costShow() {
      this.isShow = true;
    },
    costSubmit() {
      //添加交费信息
      this.isShow = false;
      // this.precostList.push(this.costForm)
      //因数据的双向绑定,第二次提交的表单内容将会把第一次提交的表单内容覆盖掉,所以需要通过克隆的方式来解决
      var costObj = _.cloneDeep(this.costForm);
      this.precostList.push(costObj);
      this.costList.push(costObj);
      resetFormData(this, "costForm"); //还原表格最初状态,包括选定状态
      //为costObj添加临时id
      costObj.tempId = new Date().getTime();
      console.log(this.precostList);
    },
    costCancel() {
      this.isShow = false;
    },
    costDel(tempId) {
      //通过filter实现删除数据
      this.precostList = this.precostList.filter(
        (item) => item.tempId != tempId
      );
      this.costList = this.costList.filter((item) => item.tempId != row.tempId);
    },
  },
};
</script>
<style lang='scss' scoped>
.el-card {
  border: none;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>